<template>
  <q-page>
    <q-list separator no-border v-if="tops.length > 0">
      <q-list-header class="text-primary">特别关注</q-list-header>
      <q-item v-for="item in tops" :key="'top'+item.id" 
              :to="'/douban/movie/' + item.id">
        <q-item-main>
          <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
          <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
          <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
        </q-item-main>
        <q-item-side right icon="chevron_right" />
      </q-item>
    </q-list>
    <q-list separator no-border v-if="latest.length > 0">
      <q-item-separator />
      <q-list-header class="text-secondary">近期热映</q-list-header>
      <q-item v-for="item in latest" :key="'latest'+item.id" 
              :to="'/douban/movie/' + item.id">
        <q-item-main>
          <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
          <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
          <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
        </q-item-main>
        <q-item-side right icon="chevron_right" />
      </q-item>
    </q-list>

    <!-- create new -->
    <q-btn round color="primary" class="fixed" icon="add" size="lg"
      style="right: 15px; bottom: 15px"
      to="/douban/movie/search" />
  </q-page>
</template>

<script>
import Douban from '../api/movie.js';

export default {
  name: 'IndexDouban',
  data() {
    return {
      title: '豆瓣影片',
      tops: [],
      latest: [],
    }
  },
  mounted() {
    let me = this;
    Douban.loadMovieInterests(res => {
      let data = res.data.model;
      me.tops = data.tops;
      me.latest = data.latest;
    });
  },
  methods: {

  }
}
</script>